<script setup>
import {ref, computed} from 'vue'
import {Edit, Delete} from '@element-plus/icons-vue'
import PageContiner from "@/components/PageContiner.vue";
import DrawerCom from "@/components/DrawerCom .vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteQuestionById, getQuestionAll, getQuestionAllByAdmin} from "@/api/question.js";
import {getTags} from "@/api/tag.js";

const drawerCom = ref()

const initQuestionParam = {
  title: '',
  content: '',
  tagId: '',
  startTime: '',
  endTime: '',
  current: 1,
  pageSize: 10
};

const questionQueryRequest = ref({
  title: '',
  content: '',
  tagId: '',
  startTime: '',
  endTime: '',
  current: 1,
  pageSize: 10
})

const tags = ref([]);
const getTagss = async () => {
  const res = await getTags(0);
  tags.value = res.data.data;
}


const onEditChannel = (row, $index) => {
  drawerCom.value.open(row)
}
const onDelChannel = (row, $index) => {
  // 确认删除吗？
  open(row)
}
const open = (row) => {
  ElMessageBox.confirm(
      '确认要删除吗?',
      '删除',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消删除',
        type: 'warning',
      }
  )
      .then(() => {
        console.log('我是id')
        console.log('row then:', row); // 在这里打印一下row的值
        deleteQuestionById([row.id]);
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })

  console.log('row:', row); // 在这里打印一下row的值
}

const onAddChannel = () => {
  drawerCom.value.open()
}

const handleClick = () => {
  console.log('click')
}

const tableData = ref([])

const getQuestionAllPage = async () => {
  // 自定义逻辑
  await fillData(questionQueryRequest.value)
}
const total = ref()
const fillData = async (param) => {
  const result = await getQuestionAllByAdmin(param)
  console.log(result)
  tableData.value = result.data.data.records;
  total.value = result.data.data.total
}

const handleSizeChange = (number) => {
  questionQueryRequest.value.current = 1;
  questionQueryRequest.value.pageSize = number;
  console.log('页大小' + number)
  getQuestionAllPage()

}
const handleCurrentChange = (number) => {
  questionQueryRequest.value.current = number;
  console.log('当前页' + number)
  getQuestionAllPage()
}

const formattedDate = computed(() => {
  return (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString(); // 这里可以根据需要自定义日期格式
  }
});

const truncateContent = (text) => {
  return text.length > 12 ? text.substring(0, 6) + '...' : text;
};

const colorRandom = ref('')

const getColor = () => {
  const randomNumber = Math.floor(Math.random() * 5) + 1;
  console.log('-----');
  console.log(randomNumber);
  switch (randomNumber) {
    case 1:
      colorRandom.value = 'primary';
      break;
    case 2:
      colorRandom.value = 'success';
      break;
    case 3:
      colorRandom.value = 'info';
      break;
    case 4:
      colorRandom.value = 'warning';
      break;
    case 5:
      colorRandom.value = 'danger';
      break;
  }
};


const disabledDate = (time) => {
  return time.getTime() > Date.now()
}


const resetParam = () => {
  questionQueryRequest.value = {
    title: '',
    content: '',
    tagId: '',
    startTime: '',
    endTime: '',
    current: 1,
    pageSize: 10
  };
  // window.location.reload();
  getQuestionAllPage()
}


getColor()
getQuestionAllPage()
getTagss()

</script>
<template>
  <page-continer title="题目管理">
    <!--    <template #extra>-->
    <!--      <el-button type="primary" @click="onAddChannel">添加题目</el-button>-->
    <!--    </template>-->
    <!--    表单区域-->
    <el-form inline style="margin-left: 10px">
      <el-form-item label="标题">
        <el-input v-model="questionQueryRequest.title" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-select
            v-model="questionQueryRequest.tagId"
            style="width: 100px"
            class="m-2"
            placeholder="请选择"
        >
          <el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="questionQueryRequest.startTime"
            type="date"
            value-format="YYYY-MM-DDTHH:mm:ss"
            format="YYYY-MM-DD"
            placeholder="开始时间"
            size='default'
            style="width: 150px"
        />
        ~
        <el-date-picker
            v-model="questionQueryRequest.endTime"
            type="date"
            value-format="YYYY-MM-DDTHH:mm:ss"
            format="YYYY-MM-DD"
            placeholder="结束时间"
            :disabled-date="disabledDate"
            size='default'
            style="width: 150px"
        />
      </el-form-item>
      <el-form-item>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getQuestionAllPage()" plain>搜索</el-button>
        <el-button type="reset" @click="resetParam">重置</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="onAddChannel" plain>添加题目</el-button>
      </el-form-item>
    </el-form>
    <!--    <el-button type="primary" @click="onAddChannel">添加题目</el-button>-->
    <!--    表格区域-->
    <el-table :data="tableData" stripe style="width: 100%;margin-top: 10px">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="title" label="标题">
        <template #default="{row}">
          {{ truncateContent(row.title) }}
        </template>
      </el-table-column>
      <el-table-column prop="content" label="题目内容">
        <template #default="{row}">
          {{ truncateContent(row.content) }}
        </template>
      </el-table-column>
      <el-table-column prop="tags" label="标签">
        <template #default="{ row, $index }">
          <div>

            <el-tag
                v-for="item in row.tagsName"
                :key="item.tagsName"
                :type="colorRandom"
                effect="Light"
                style="margin-right: 5px"
            >
              <span> {{ item }}</span>
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="commAmount" label="提交数"></el-table-column>
      <el-table-column prop="acAmount" label="通过数"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template #default="{ row }">
          {{ formattedDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <!-- row 就是 channelList 的一项， $index 下标 -->
        <template #default="{ row, $index }">
          <el-button
              :icon="Edit"
              circle
              plain
              type="primary"
              @click="onEditChannel(row, $index)"
          ></el-button>
          <el-button
              :icon="Delete"
              circle
              plain
              type="danger"
              @click="onDelChannel(row, $index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页区域-->
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="questionQueryRequest.current"
          v-model:page-size="questionQueryRequest.pageSize"
          :page-sizes="[2, 5, 10, 20]"
          :background="true"
          layout="jumper,total, sizes, prev, pager, next "
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 20px; justify-content: end"
      />
    </div>

    <DrawerCom ref="drawerCom"></DrawerCom>

  </page-continer>
  <!--  <DialogCom ref="diglog"></DialogCom>-->
</template>

<style scoped>
#QuestionManager {
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
